<template>
  <div class="category">
    <div class="body">
      <Card :bordered="false">
        <p slot="title" class="title">文章分类</p>
        <p class="card">这是一个工具！他是什么呢？他就是————————卡片！！！</p>
      </Card>
    </div>
    <div class="container">
      <Card :bordered="false">
        <Collapse class="collapse-body" simple v-model="value1">
          <Panel
            name="1"
            class="category-item collapsed list-group-item category-item-action"
          >
            苹果CMS
            <div slot="content">
              <p slot="content" class="category-panel category-collapse">
                在VMware虚拟机中部署Kail Linux
              </p>
              <p slot="content" class="category-panel category-collapse">
                在VMware虚拟机中部署Kail Linux
              </p>
            </div>
          </Panel>
          <Panel
            name="2"
            class="category-item collapsed list-group-item category-item-action"
          >
            Kali Linux
            <p slot="content" class="category-panel category-collapse">
              在VMware虚拟机中部署Kail Linux
            </p>
          </Panel>

          <Panel
            name="3"
            class="category-item collapsed list-group-item category-item-action"
          >
            Caddy
            <div slot="content">
              <Collapse simple accordion v-model="value5">
                <Panel
                  name="3-1"
                  class="category-item collapsed list-group-item category-item-action"
                >
                  Aria2
                  <p slot="content" class="category-panel category-collapse">
                    在Linux一键安装Caddy + Aria2 + AriaNg
                  </p>
                </Panel>
              </Collapse>
            </div>
          </Panel>
          <Panel
            name="4"
            class="category-item collapsed list-group-item category-item-action"
          >
            Hexo
            <p slot="content" class="category-panel category-collapse">
              在升级Hexo中遇到问题
            </p>
          </Panel>
          <Panel
            name="5"
            class="category-item collapsed list-group-item category-item-action"
          >
            AdGuard Home
            <p slot="content" class="category-panel category-collapse">
              使用AdGuardHome搭建一个过滤广告和过滤跟踪的私人DNS
            </p>
          </Panel>
        </Collapse>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "1",
      value4: "1-1",
      value5: "1-1-1"
    };
  }
};
</script>
<style lang="less" scoped>
/*********** clearfix begin*************/
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
/*********** clearfix end*************/

/*分类页*/
.category-item {
  font-size: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item {
  background-color: transparent;
  border: 0;
}
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.ivu-collapse {
  border: none;
}
.ivu-collapse-header {
  border: none;
}
.category-panel {
  margin-top: 20px;
  font-size: 1.1rem;
  border: none;
  line-height: 40px;
  padding-left: 16px;
  color: #666;
  font-weight: normal;
}
.category-collapse {
  margin-left: 2rem;
  width: 100%;
}
.category {
  .body {
    background: #eee;
    padding: 20px;
    .title {
      font-size: 1.25rem;
      font-weight: bold;
      text-align: center;
    }
    .card {
      text-align: center;
      font-size: 1.25rem;
    }
  }

  .container {
    background: #eee;
    padding: 0px;
    margin: 120px;
    border-radius: 40px;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24),
      0 17px 50px 0 rgba(0, 0, 0, 0.19);
    .collapse-body {
      margin: 30px;
    }
  }
}
</style>
